<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <!-- 属性绑定 -->
    <div id="app">
        <div class="btn btn-primary"></div>
        <!-- 注意：'isActive'它表示一个字符串,并不是一个布尔变量' -->
       <!-- <div :class="{'btn':isActive,'abc':hasError}">可以给class绑定，动态切换</div>
       <div :class="{'btn':isActive}">可以给class绑定，动态切换</div>
       <div :class="classObj">可以给class绑定，动态切换</div> -->

       <div v-bind:class="[activeClass, errorClass]">数组的方式绑定</div>

    </div>
    <script>
        // 创建Vue的对象
        let vm = new Vue({
            el:"#app",
            data:{
                activeClass: 'active',
                errorClass: 'text-danger'
            //    isActive:true,
            //    hasError:false,
            //    classObj:{
            //        'textColor':true,
            //        'textSize':true
            //    }
            }
        })
    </script>
</body>
</html>